﻿<template>
  <div v-loading = 'loading'>
    <!-- 标题部分 -->
    <el-page-header @back = "goBack" title = "数据集管理" :content = "titleName" class = 'page_header'></el-page-header>
    <div class = "page_secondMainContent clear">
      <!-- 左侧表的树状列表 -->
      <div class = "page_leftContent page_leftContent_set">
        <!-- 一个选择数据源的下拉框 -->
        <div class = 'set_sourceChange'>
          <p>选择数据源</p>
          <el-select placeholder = '请选择数据源' filterable :disabled = "dialogInfo.operationType === 'preview'"
          @change = 'getCurrentSourceTable' v-model = 'currentSource'>
            <el-option v-for = "(item, index) in sourceList" :key = 'index'
            :label = 'item.SourceName' :value = 'item.SourceUID'
            ></el-option>
          </el-select>
        </div>
        <!-- 上部一个检索框 -->
        <div class = 'set_searchContent'>
          <el-input placeholder = "输入关键字进行检索" v-model = "searchTableVal" prefix-icon = "el-icon-search" clearable></el-input>
        </div>
        <!-- 下部展示列表 -->
        <el-tabs v-model = 'currentTabs' stretch>
          <el-tab-pane label = '元数据表' name = 'metaTable'>
            <ul class = 'set_list'>
              <li v-for = "(item, index) in metaTableList" :key = 'index'
              :class = "item.metaname === checkedInfo.tableId ? 'active' : ''">
                <span class = 'list_addBtn' @click = 'changeCheckedTable(item)'
                v-if = "dialogInfo.operationType !== 'preview'">
                  <i class = 'iconfont icon-add'></i>
                </span>
                <div class = 'list_content'>
                  <i class = 'iconfont icon-biaoge'></i>
                  <span>{{item.metadesc ? item.metadesc : item.metaname}}</span>
                </div>
              </li>
              <li v-show = '!metaTableList.length'
              class = 'set_noData'>暂无数据!</li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label = '数据源表' name = 'sourceTable'>
            <ul class = 'set_list'>
              <li v-for = "(item, index) in sourceTableList" :key = 'index'
              :class = "item.table_name === checkedInfo.tableId ? 'active' : ''">
                <span class = 'list_addBtn' @click = 'changeCheckedTable(item)'
                v-if = "dialogInfo.operationType !== 'preview'">
                  <i class = 'iconfont icon-add'></i>
                </span>
                <div class = 'list_content'>
                  <i class = 'iconfont icon-biaoge'></i>
                  <span>{{item.table_name}}</span>
                </div>
              </li>
              <li v-show = '!sourceTableList.length'
              class = 'set_noData'>暂无数据!</li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label = '数据源视图' name = 'sourceView'>
            <ul class = 'set_list'>
              <li v-for = "(item, index) in sourceViewList" :key = 'index'
              :class = "item.view_name === checkedInfo.tableId ? 'active' : ''">
                <span class = 'list_addBtn' @click = 'changeCheckedTable(item)'
                v-if = "dialogInfo.operationType !== 'preview'">
                  <i class = 'iconfont icon-add'></i>
                </span>
                <div class = 'list_content'>
                  <i class = 'iconfont icon-biaoge'></i>
                  <span>{{item.view_name}}</span>
                </div>
              </li>
              <li v-show = '!sourceViewList.length'
              class = 'set_noData'>暂无数据!</li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 右侧内容区域 -->
      <div class = "page_rightContent page_rightContent_set">
        <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules =  'rules'>
          <el-row :gutter = '10'>
            <el-col :span = '12' style = 'height:52px'>
              <el-form-item label = "所属数据源：">
                <el-select disabled v-model = 'checkedInfo.sourceId'>
                  <el-option v-for = "(item, index) in sourceList" :key = 'index' :label = 'item.SourceName' :value = 'item.SourceUID'></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span = '12' style = 'height:52px'>
              <el-form-item label = "数据表名称：">
                <el-input readonly v-model = 'checkedInfo.tableId'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span = '24'>
              <el-form-item label = "数据表字段信息：">
                <ul class = 'set_columnsList clear'>
                  <li v-for = '(item, index) in checkedInfo.columns' :key = 'index'>
                    {{item.column_name + '(' + (item.data_type ? item.data_type : item.column_type) + ')'}}
                  </li>
                </ul>
              </el-form-item>
            </el-col>
            <el-col :span = '12' style = 'height:52px'>
              <el-form-item label = "数据集名称：" prop = 'title'>
                <el-input placeholder = '请输入数据集名称' :readonly = "dialogInfo.operationType === 'preview'"
                clearable v-model = 'ruleForm.title'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span = '12' style = 'height:52px'>
              <el-form-item label = "数据表别名：">
                <el-input placeholder = '请输入数据表别名' :readonly = "dialogInfo.operationType === 'preview'"
                clearable v-model = 'ruleForm.as'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="参数设定">
                <div class = "addColumn" v-if = "dialogInfo.operationType !== 'preview'">
                  <p @click = "openAddParameterDialog(null, ruleForm.parameters.length)"><i class = "iconfont icon-add"></i>添加参数</p>
                </div>
                <el-table :data = "ruleForm.parameters" style="{width: 100%}" stripe border>
                  <el-table-column align = "center" prop = 'param_name' width = '100px' label = '参数名称'></el-table-column>
                  <el-table-column align = "center" prop = 'source' label = '数据源'></el-table-column>
                  <el-table-column align = "center" prop = 'table' label = '表名'></el-table-column>
                  <el-table-column align = 'center' v-if = "dialogInfo.operationType !== 'preview'" label = '操作' width = "120">
                    <template slot-scope = 'scope'>
                      <el-button type = "text" size = "mini" title = '移除'
                      @click = "removeParameter(scope.$index)">
                        <i class="iconfont icon-shanchu"></i>移除
                      </el-button>
                      <el-button type = "text" size = "mini" @click = "openAddParameterDialog(scope.row, scope.$index)" title = '编辑'>
                        <i class="iconfont icon-bianji"></i>编辑
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
            <el-col :span = '24'>
              <el-form-item label = "维度表达式：">
                <div class = "addColumn" v-if = "dialogInfo.operationType !== 'preview'">
                  <p @click = "openAddExpressDialog(null, ruleForm.dimensionArray.length, 'dimensionArray')"><i class = "iconfont icon-add"></i>添加数据</p>
                </div>
                <el-table :data = 'ruleForm.dimensionArray' style = "{width: 100%}" stripe border>
                  <el-table-column align = "center" prop = 'keyStr' width = '100px' label = '字段名称' show-overflow-tooltip></el-table-column>
                  <!-- <el-table-column align = "center" prop = 'keyName' label = '字段描述' show-overflow-tooltip></el-table-column> -->
                  <el-table-column align = "center" prop = 'keyExpress' label = '表达式' show-overflow-tooltip></el-table-column>
                  <el-table-column align = 'center' v-if = "dialogInfo.operationType !== 'preview'" label = '操作' width = "120">
                    <template slot-scope = 'scope'>
                      <el-button type = "text" size = "mini" title = '移除'
                      @click = "removeExpress(scope.$index, 'dimensionArray')">
                        <i class="iconfont icon-shanchu"></i>移除
                      </el-button>
                      <el-button type = "text" size = "mini" @click = "openAddExpressDialog(scope.row, scope.$index, 'dimensionArray')" title = '编辑'>
                        <i class="iconfont icon-bianji"></i>编辑
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
            <el-col :span = '24'>
              <el-form-item label = "量度表达式：">
                <div class = "addColumn" v-if = "dialogInfo.operationType !== 'preview'">
                  <p @click = "openAddExpressDialog(null, ruleForm.measurementArray.length, 'measurementArray')"><i class = "iconfont icon-add"></i>添加数据</p>
                </div>
                <el-table :data = 'ruleForm.measurementArray' style = "{width: 100%}" stripe border>
                  <el-table-column align = "center" prop = 'keyStr' width = '100px' label = '字段名称' show-overflow-tooltip></el-table-column>
                  <!-- <el-table-column align = "center" prop = 'keyName' label = '字段描述' show-overflow-tooltip></el-table-column> -->
                  <el-table-column align = "center" prop = 'keyExpress' label = '表达式' show-overflow-tooltip></el-table-column>
                  <el-table-column align = 'center' v-if = "dialogInfo.operationType !== 'preview'" label = '操作' width = "120">
                    <template slot-scope = 'scope'>
                      <el-button type = "text" size = "mini" title = '移除'
                      @click = "removeExpress(scope.$index, 'measurementArray')">
                        <i class="iconfont icon-shanchu"></i>移除
                      </el-button>
                      <el-button type = "text" size = "mini" @click = "openAddExpressDialog(scope.row, scope.$index, 'measurementArray')" title = '编辑'>
                        <i class="iconfont icon-bianji"></i>编辑
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
            <el-col :span = '24'>
              <el-form-item label = "条件表达式：">
                <el-input placeholder = '请输入条件表达式' :readonly = "dialogInfo.operationType === 'preview'"
                type = 'textarea' autosize clearable v-model = 'ruleForm.where'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span = '24'>
              <el-form-item label = "排序表达式：">
                <el-input placeholder = '请输入排序表达式' :readonly = "dialogInfo.operationType === 'preview'"
                type = 'textarea' autosize clearable v-model = 'ruleForm.orderby'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span = '24'>
              <el-form-item label = "join表达式：">
                <el-input placeholder = '请输入join表达式' :readonly = "dialogInfo.operationType === 'preview'"
                type = 'textarea' autosize clearable v-model = 'ruleForm.join'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item class = 'form_noLeftMargin' v-if = "dialogInfo.operationType !== 'preview'">
            <el-button type = "primary" @click = "submitForm ('ruleForm')">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <AddExpress :dialogInfo = 'addExpressDialog'
    @operationReset = 'addExpressDialog.dialogFormVisible = false'
    @operationSuccess = 'addExpressSuccess'></AddExpress>
    <add-parameter :data="addParameterDialog"
    @operationReset = "addParameterDialog.dialogFormVisible = false"
    @operationSuccess = 'addParameterSuccess'></add-parameter>
  </div>
</template>

<script src='./dataSetForm.js'></script>
